      /* eslint-disable no-undef */
<template>
  <div class="homePage">
    <div>
      <el-row :gutter="10">
        <el-col :span="16" style="height:100%">
          <div class="">
            <el-row>
              <el-card style="height: 400px;">
                <el-col :span="18">
                  <el-row>
                    <el-col :span="24">
                      <chart
                        v-if="monthStatisticsDataView"
                        ref="chart"
                        :title-text="'需求计划统计'"
                        :legend-position="'bottom'"
                        :series-defaults-type="'column'"
                        :value-axis-line-visible="true"
                        :category-axis-categories="monthStatisticsData.categories"
                        :category-axis-min="monthStatisticsData.min"
                        :category-axis-max="monthStatisticsData.max"
                        :category-axis-major-grid-lines-visible="false"
                        :tooltip-visible="true"
                        :tooltip-template="tooltipTemplate"
                        :pannable-lock="'y'"
                        :zoomable="monthStatisticsZoomAble"
                        :series-colors="['#ff5c1a','#5798be']"
                        :theme="'sass'"
                        style="height:300px;width:100%"
                      >
                        <chart-series-item
                          v-for="(item, index) in monthStatisticsData.series"
                          :key="index"
                          :name="item.name"
                          :data="item.data"
                          :visible="true"
                        />
                      </chart>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6" style="padding:25px">
                  <el-row class="custNumsList">
                    <el-col :span="24" class="custNumsLabel">当月新增需求</el-col>
                    <el-col :span="24" class="custNumsValAdd">+<countTo :start-val="0" :end-val="monthStatisticsData.cmReqReceiveNum" :duration="1000" class="" /></el-col>
                  </el-row>
                  <el-row class="custNumsList">
                    <el-col :span="24" class="custNumsLabel">当月完成需求</el-col>
                    <el-col :span="24" class="custNumsValSubtr">-<countTo :start-val="0" :end-val="monthStatisticsData.cmReqCompleteNum" :duration="1000" class="" /></el-col>
                  </el-row>
                </el-col>
              </el-card>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <el-card v-if="classifyStatisticsDataView" style="height: 400px;">
            <el-col v-for="(item,index) in classifyStatisticsData" :key="index" :span="12" style="padding:5px">
              <el-card>
                <el-row class="custNumsList">
                  <el-col :span="24" class="custNumsLabel">{{ item.name }}</el-col>
                  <el-col :span="24" class="custNumsVal">需求总数：<countTo :start-val="0" :end-val="item.totalCount" :duration="1000" class="" /></el-col>
                  <el-col :span="24" class="custNumsValAdd"><span style="font-size:14px">已经完成：</span><countTo :start-val="0" :end-val="item.completeCount" :duration="1000" class="" /></el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px">
        <el-col :span="24">
          <el-card style="height:400px">
            <el-row>
              <el-col :span="24">
                <chart
                  v-if="monthStatisticsDataView"
                  ref="chart"
                  :title-text="'项目成员需求分配'"
                  :legend-position="'bottom'"
                  :series-defaults-type="'column'"
                  :visible="true"
                  :value-axis-line-visible="true"
                  :category-axis-categories="devInChargeStatisticsData.categories"
                  :category-axis-major-grid-lines-visible="false"
                  :labels-visible="true"
                  :tooltip-visible="true"
                  :tooltip-template="tooltipTemplate"
                  :pannable-lock="'y'"
                  :series-colors="['#ff5c1a','#5798be']"
                  :theme="'sass'"
                  style="height:400px;width:100%"
                >
                  <chart-series-item
                    v-for="(item, index) in devInChargeStatisticsData.series"
                    :key="index"
                    :name="item.name"
                    :data="item.data"
                    :visible="true"
                  />
                </chart>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { Chart, ChartSeriesItem } from '@progress/kendo-charts-vue-wrapper'
  import countTo from 'vue-count-to'
  export default {
    name: 'App',
    components: {
      'chart': Chart,
      'chart-series-item': ChartSeriesItem,
      // 'sparkline': Sparkline,
      countTo
    },
    data: function() {
      return {
        tooltipTemplate: '#= series.name #: #= value #',
        monthStatisticsDataView: false,
        monthStatisticsData: {

        },
        monthStatisticsZoomAble: {
          mousewheel: {
            lock: 'y'
          },
          selection: {
            lock: 'y'
          }
        },
        monthStatisticsPannable: {

        },
        devInChargeStatisticsDataView: false,
        devInChargeStatisticsData: {

        },
        classifyStatisticsDataView: false,
        classifyStatisticsData: [],
        tooltip: {
          visible: true,
          template: '#= series.name #: #= value #'
        },
        template: "#= category # - #= kendo.format('{0:P}', percentage) #"
      }
    },
    mounted() {
      // 初始化统计视图数据
      this.reqmentStatisticsData()
    },
    methods: {
      reqmentStatisticsData() {
        this.$post('/service/statistical/charts/taskPlanStatistical').then(res => {
          if (res.code !== 200) {
            this.$KendoNotify({
              title: '错误信息:' + res.code,
              message: res.message
            }, 'error')
          } else {
            this.monthStatisticsData = Object.assign(this.monthStatisticsData, this.deepCopy(res.data.monthStatisticsData))
            this.$set(this.monthStatisticsData, 'min', res.data.monthStatisticsData.categories.length - 12)
            this.$set(this.monthStatisticsData, 'max', res.data.monthStatisticsData.categories.length)
            this.devInChargeStatisticsData = Object.assign(this.devInChargeStatisticsData, this.deepCopy(res.data.devInChargeStatisticsData))
            this.classifyStatisticsData = res.data.classifyStatisticsData
            this.monthStatisticsDataView = true
            this.classifyStatisticsDataView = true
          }
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }
</script>

<style>
  .homePage{
    margin-bottom: 20px;
  }
  .homePage .el-card__body{
    padding: 10px;
  }
  .homePage .custNumsList{
    padding-top: 20px;
    padding-left: 10px;
  }
  .homePage .custNumSmall{
    padding-left: 10px;
  }
  .homePage .custNumSmall .custNumsLabel{
    font-weight: bold;
    color: #5798be;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .homePage .custNumSmall .custNumsValAdd{
    font-size: 1em;
    color: #ff5c1a;
  }
  .homePage .custNumSmall  .custNumsValSubtr{
    font-size: 1em;
    color: greenyellow;
  }

  .homePage .custNumSmall  .custNumsValRatio{
    font-size: 1em;
    color: #ff5c1a;
  }

  .homePage .custNumsList .custNumsLabel{
    font-weight: bold;
    color: #5798be;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .homePage .custNumsList .custNumsValAdd{
    font-size: 1.5em;
    color: #ff5c1a;
  }
    .homePage .custNumsList .custNumsValAdd>span{
    font-size: 18px;
    color: #ff5c1a;
  }
  .homePage .custNumsList  .custNumsValSubtr{
    font-size: 2em;
    color: #5798be;
  }
  .homePage .custNumsList  .custNumsValSubtr>span{
    font-size: 18px;
    color: #5798be;
  }
  .homePage .custNumsList  .custNumsValRatio{
    font-size: 1.5em;
    color: #ff5c1a;
  }
</style>
